<template>
  <div class="main">
    <u-navbar title="煤层详情"> </u-navbar>

    <u-tabs :list="list" is-scroll :current="current" @change="change" active-color="rgb(1, 72, 51)"
      inactive-color="rgb(153, 153, 153)"></u-tabs>
    <scroll-view :scroll-into-view="toView" scroll-with-animation scroll-y id="content" class="content"
      @scroll="handleScroll">

      <div id="view1">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0">
          <view slot="head">
            <view class="u-flex head">
              <u-section title="基本信息" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-content u-m-t-0">
                <span class="unit">煤矿名称:</span>
                <span class="val">{{ form.customerName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">煤层名称:</span>
                <span class="val">{{ form.layerName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">主要煤种:</span>
                <span class="val">{{ form.importantColName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">可采情况:</span>
                <span class="val">{{ form.canDiggingSituationName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">原始地质储量(万吨):</span>
                <span class="val">{{ form.geologyReserves }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">设计可采储量(万吨):</span>
                <span class="val">{{ form.mineReserves }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">最小厚度(m):</span>
                <span class="val">{{ form.allMinThick }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">最大厚度(m):</span>
                <span class="val">{{ form.allMaxThick }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">平均厚度(m):</span>
                <span class="val">{{ form.coalAverageThick }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">最大倾角(°):</span>
                <span class="val">{{ form.maxObliquity }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">最小倾角(°):</span>
                <span class="val">{{ form.minObliquity }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">平均倾角(°):</span>
                <span class="val">{{ form.averageObliquity }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">距上覆煤层(m):</span>
                <span class="val">{{ form.topCoalSeam }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">距下覆煤层(m):</span>
                <span class="val">{{ form.underCoalSeam }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">煤层稳定性:</span>
                <span class="val">{{ form.coalSeamStabilityName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">密度(t/m³):</span>
                <span class="val">{{
                  form.density
                  }}</span>
              </div>
            </div>
          </view>
        </u-card>
      </div>
      <div id="view2" class="u-m-t-40">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0">
          <view slot="head">
            <view class="u-flex head">
              <u-section title="顶底板岩性" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-content u-m-t-0">
                <span class="unit">顶板岩性:</span>
                <span class="val">{{ form.topNatureName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">底板岩性:</span>
                <span class="val">{{ form.footNatureName }}</span>
              </div>
            </div>
          </view>
        </u-card>
      </div>
      <div id="view3" class="u-m-t-40">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0">
          <view slot="head">
            <view class="u-flex head">
              <u-section title="瓦斯赋存情况" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-content u-m-t-0">
                <span class="unit">突出危险性:</span>
                <span class="val">{{ form.isDangerName }}</span>
              </div>
              <div v-if="form.isDangerName&&form.isDangerName!='未鉴定'" class="sctb-content">
                <span class="unit">突出危险性鉴定标高:</span>
                <span class="val">{{ form.mainDangerIdentifyElevation }}</span>
              </div>
              <div v-if="form.isDangerName&&form.isDangerName!='未鉴定'" class="sctb-content">
                <span class="unit">瓦斯含量(m³/t):</span>
                <span class="val">{{ form.testGasAmount }}</span>
              </div>
              <div v-if="form.isDangerName&&form.isDangerName!='未鉴定'" class="sctb-content">
                <span class="unit">瓦斯压力(MPa):</span>
                <span class="val">{{ form.testGasPres }}</span>
              </div>
              <div v-if="form.isDangerName&&form.isDangerName!='未鉴定'" class="sctb-content">
                <span class="unit">透气性系数(mD):</span>
                <span class="val">{{ form.testGasRatio }}</span>
              </div>
              <div v-if="form.isDangerName&&form.isDangerName!='未鉴定'" class="sctb-content">
                <span class="unit">坚固性系数:</span>
                <span class="val">{{ form.testStrongRatio }}</span>
              </div>
            </div>
            <view class="card-grid u-p-20">
              <template v-if="fileOne && fileOne.length > 0">
                <template v-for="(item, index) in fileOne">
                  <!-- 显示图片类 -->
                  <u-image v-if="getFileType(item.archivesUrl) === 'file image'" border-radius="30" width="100%"
                    height="200rpx" :src="getSrc(item.archivesUrl)" :key="index" @click="download(item.archivesUrl)">
                    <view slot="error">
                      <u-image :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"
                        width="160rpx" height="160rpx" />
                    </view>
                  </u-image>
                  <!-- 显示非图片类 -->
                  <view class="file-down" v-else :key="'no' + index" @click="download(item.archivesUrl)">
                    <u-image width="160rpx" height="160rpx"
                      :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"></u-image>
                  </view>
                </template>
              </template>
              <!-- 图片缺失 -->
              <u-image v-else border-radius="30" width="100%" height="200rpx"
                src="/static/image/pz/licenseWarning/picture_missing.png" />
            </view>
          </view>
        </u-card>
      </div>
      <div id="view4" class="u-m-t-40">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0">
          <view slot="head">
            <view class="u-flex head">
              <u-section title="自燃倾向性" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-content u-m-t-0">
                <span class="unit">自燃倾向性:</span>
                <span class="val">{{ form.autoigntionName }}</span>
              </div>
            </div>
            <view class="card-grid u-p-20">
              <template v-if="fileTwo && fileTwo.length > 0">
                <template v-for="(item, index) in fileTwo">
                  <!-- 显示图片类 -->
                  <u-image v-if="getFileType(item.archivesUrl) === 'file image'" border-radius="30" width="100%"
                    height="200rpx" :src="getSrc(item.archivesUrl)" :key="index" @click="download(item.archivesUrl)">
                    <view slot="error">
                      <u-image :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"
                        width="160rpx" height="160rpx" />
                    </view>
                  </u-image>
                  <!-- 显示非图片类 -->
                  <view class="file-down" v-else :key="'no' + index" @click="download(item.archivesUrl)">
                    <u-image width="160rpx" height="160rpx"
                      :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"></u-image>
                  </view>
                </template>
              </template>
              <!-- 图片缺失 -->
              <u-image v-else border-radius="30" width="100%" height="200rpx"
                src="/static/image/pz/licenseWarning/picture_missing.png" />
            </view>
          </view>
        </u-card>
      </div>
      <div id="view5" class="u-m-t-40">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0">
          <view slot="head">
            <view class="u-flex head">
              <u-section title="煤尘爆炸性" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-content u-m-t-0">
                <span class="unit">煤尘爆炸性:</span>
                <span class="val">{{ form.dustExplosionName }}</span>
              </div>
            </div>
            <view class="card-grid u-p-20">
              <template v-if="fileThr && fileThr.length > 0">
                <template v-for="(item, index) in fileThr">
                  <!-- 显示图片类 -->
                  <u-image v-if="getFileType(item.archivesUrl) === 'file image'" border-radius="30" width="100%"
                    height="200rpx" :src="getSrc(item.archivesUrl)" :key="index" @click="download(item.archivesUrl)">
                    <view slot="error">
                      <u-image :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"
                        width="160rpx" height="160rpx" />
                    </view>
                  </u-image>
                  <!-- 显示非图片类 -->
                  <view class="file-down" v-else :key="'no' + index" @click="download(item.archivesUrl)">
                    <u-image width="160rpx" height="160rpx"
                      :src="`/static/image/pz/fileAttachments/${getFileTypeName(item.archivesUrl)}.svg`"></u-image>
                  </view>
                </template>
              </template>
              <!-- 图片缺失 -->
              <u-image v-else border-radius="30" width="100%" height="200rpx"
                src="/static/image/pz/licenseWarning/picture_missing.png" />
            </view>
          </view>
        </u-card>
      </div>
      <div id="view6" class="u-m-t-40">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0">
          <view slot="head">
            <view class="u-flex head">
              <u-section title="水害情况" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-content u-m-t-0">
                <span class="unit">上覆含水层:</span>
                <span class="val">{{ form.overlyingAquiferName }}</span>
              </div>
              <div v-if="form.overlyingAquiferName&&form.overlyingAquiferName!='无'" class="sctb-content">
                <span class="unit">距上覆含水层距离(m):</span>
                <span class="val">{{ form.distanceOverlyingAquifer }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">下覆含水层:</span>
                <span class="val">{{ form.underlyingAquiferName }}</span>
              </div>
              <div v-if="form.overlyingAquiferName&&form.underlyingAquiferName!='无'" class="sctb-content">
                <span class="unit">距下覆含水层距离(m):</span>
                <span class="val">{{ form.distanceUnderlyingAquifer }}</span>
              </div>
            </div>
          </view>
        </u-card>
      </div>
      <div id="view7" class="u-m-t-40">
        <u-card box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }" :head-border-bottom="false" class="u-m-0">
          <view slot="head">
            <view class="u-flex head">
              <u-section title="其他开采条件" color="rgb(1, 72, 51)" font-size="30" :right="false"></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-content u-m-t-0">
                <span class="unit">冲击地压危险性:</span>
                <span class="val">{{ form.impingingDangerousName }}</span>
              </div>
              <div class="sctb-content">
                <span class="unit">热害:</span>
                <span class="val">{{ form.heatDamageName }}</span>
              </div>
            </div>
          </view>
        </u-card>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import fileDownload from "@/pages/common/fileDownload.js";
export default {
  mixins: [fileDownload],
  data() {
    return {
      fileTypeOne: {
        archivesType: "cjt2101",
        materialType: "cjt21",
        method: "POST",
        relationId: "-1",
      },
      fileTypeTwo: {
        archivesType: "cjt2102",
        materialType: "cjt21",
        method: "POST",
        relationId: "-1",
      },
      fileTypeThr: {
        archivesType: "cjt2103",
        materialType: "cjt21",
        method: "POST",
        relationId: "-1",
      },
      fileOne: [],
      fileTwo:[],
      fileThr:[],
      current: 0,
      toView: "",
      topDistance: '',
      list: [{ name: "基本信息" } , { name: "顶底板岩性" },{ name: "瓦斯赋存情况" },{ name: "自燃倾向性" },{ name: "煤尘爆炸性" },{ name: "水害情况" },{ name: "其他开采条件" }],
      form: {},
    };
  },
  onLoad(options) {
    let dataMsg = JSON.parse(options.item);
    this.fileTypeOne.relationId = dataMsg.id;
    this.fileTypeTwo.relationId = dataMsg.id;
    this.fileTypeThr.relationId = dataMsg.id;
    this.$get('/new/coal/seam/getCoalSeamInfoById?id='+dataMsg.id).then(res=>{
      this.form = res.body
    })
    this.getData();
  },
  mounted(){
    const query = uni.createSelectorQuery().in(this);
    query
      .select("#content")
      .boundingClientRect((res) => {
        this.topDistance = res.top
        console.log(this.topDistance)
      })
      .exec();
  },
  methods: {
    async getData() {
      const urlData = await this.$post(
        "/system/archives/findByType",
        this.fileTypeOne
      );
      this.fileOne = urlData.body;
      const twoUrlData = await this.$post(
        "/system/archives/findByType",
        this.fileTypeTwo
      );
      this.fileTwo = twoUrlData.body;
      const thrUrlData = await this.$post(
        "/system/archives/findByType",
        this.fileTypeThr
      );
      this.fileThr = thrUrlData.body;

    },
    change(index) {
      this.current = index;
      this.toView = `view${index + 1}`;
    },
    handleScroll({ detail }) {
      // console.log(1111)
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#view1")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 0;
          }
        })
        .exec();
      query
        .select("#view2")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 1;
          }
        })
        .exec();
      query
        .select("#view3")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 2;
          }
        })
        .exec();
      query
        .select("#view4")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 3;
          }
        })
        .exec();
      query
        .select("#view5")
        .boundingClientRect((res) => {
          // console.log(4, res.bottom - this.topDistance, res.top - this.topDistance)
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 4;
          }
        })
        .exec();
      query
        .select("#view6")
        .boundingClientRect((res) => {
          // console.log(5, res.bottom - this.topDistance, res.top - this.topDistance)
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 5;
          }
        })
        .exec();
      query
        .select("#view7")
        .boundingClientRect((res) => {
          // console.log(6, res.bottom - this.topDistance, res.top - this.topDistance)
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 6;
          }
        })
        .exec();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f6f6f6;
}

.sctb-card {
  box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
  border-radius: 6px !important;
  padding: 13px 20px;
  background: #fff;
  .title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
  }
}

.sctb-content {
  margin-top: 10px;

  .val {
    color: rgb(102, 102, 102);
    margin-left: 10px;
  }
}

.sctb-box {
  padding: 10px;
  padding-top: 0;
}

.file-grid-name {
  height: 200rpx;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: #595959;
  border: 1rpx dashed #c5c5c5;
}

.card-grid {
  width: 100%;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  /deep/.u-image__error {
    background: transparent;
  }
}
</style>
